<!doctype html>
<html lang="en">

<head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-08XPB68R9M"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-08XPB68R9M');
  </script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
  <title>EZ-Tree | Procedural Tree Generator</title>
  <meta name="description"
    content="EZ-Tree is a procedural tree generator that allows you to create realistic 3D tree models with ease.">
  <!-- SEO Meta Tags -->
  <meta name="keywords"
    content="tree generator, 3D trees, procedural generation, 3D modeling, game development, web3D, threejs">
  <meta name="author" content="Dan Greenheck">
  <meta property="og:title" content="EZ-Tree | Procedural Tree Generator">
  <meta property="og:description"
    content="EZ-Tree is a procedural tree generator that allows you to create realistic 3D tree models with ease.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://eztree.dev">
  <meta property="og:image" content="https://eztree.dev/og-image.png">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:creator" content="@dangreenheck">
  <meta name="twitter:title" content="EZ-Tree | Procedural Tree Generator">
  <meta name="twitter:description"
    content="EZ-Tree is a procedural tree generator that allows you to create realistic 3D models of trees with ease.">
  <meta name="twitter:image" content="https://eztree.dev/og-image.png">

  <link rel="stylesheet" href="/styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

</head>

<body>
  <div id="loading-screen">
    <img id="logo" src="logo.png">
    <div id="loading-text">LOADING... 0%</div>
  </div>

  <div id="root">
    <img id="about-icon" class="about-icon" src="icon_about.png" onclick="showAbout()">
    <img id="audio-status" class="audio-icon" src="icon_playing.png" onclick="toggleAudio()">
    <div id="app"></div>
    <div id="ui-container"></div>

    <div id="aboutOverlay" class="overlay">
      <div class="about-dialog">
        <img src="logo.png" alt="App Icon">
        <h1>EZ-Tree</h1>
        <h2>Procedural Tree Generator</h2>
        <h3>Made by Dan Greenheck</h3>
        <a href="https://www.dangreenheck.com">www.dangreenheck.com</a>
        <div class="social-icons">
          <a href="mailto:dan.greenheck@drgsoftwaresolutions.com" target="_blank" class="social-icon email"><i
              class="fas fa-envelope"></i></a>
          <a href="https://github.com/dgreenheck" target="_blank" class="social-icon github"><i
              class="fab fa-github"></i></a>
          <a href="https://www.youtube.com/channel/UCrdx_EU_Wx8_uBfqO0cI-9Q" target="_blank"
            class="social-icon youtube"><i class="fab fa-youtube"></i></a>
          <a href="https://www.x.com/dangreenheck" target="_blank" class="social-icon twitter"><i
              class="fab fa-x"></i></a>
          <a href="https://www.linkedin.com/in/danielgreenheck/" target="_blank" class="social-icon linkedin"><i
              class="fab fa-linkedin"></i></a>
        </div>
        <button class="close-button" onclick="closeAbout()">CLOSE</button>
      </div>
    </div>

  </div>

  <a id="downloadLink" style="display: none"></a>

  <!-- Used for file uploads -->
  <input type="file" id="fileInput" accept=".json" style="display: none" />

  <audio id="background-audio" loop>
    <source src="ambience.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>

  <script type="module" src="./main.js"></script>
  <script>
    function showAbout() {
      document.getElementById('aboutOverlay').classList.add('active');
    }

    function closeAbout() {
      document.getElementById('aboutOverlay').classList.remove('active');
    }
  </script>

</body>

</html>